<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 表单控件要写在表单元素中 form action提交用户信息的服务器地址 -->
  <form action="test.php" method="post">
    <!-- 明文输入框  -->
    用户名：<input type="text">
    <!-- 暗文输入框 -->
    密码：<input type="password"><br>
    <!-- br强制换行标签 -->
    性别:
    <!-- 点击文字 单选按钮或者输入框聚焦 label for属性值和input id值一致 -->
    <label for="list">
      男：<input type="radio" checked name="gender" value="male" id="list">
    </label>
    <label>
      女：<input type="radio" name="gender" value="female">
    </label><br>
    <!-- checked可以设置单选按钮和复选框默认选中 -->
    爱好：
    游泳：<input type="checkbox" name="hobbies" value="swiming">
    篮球：<input checked type="checkbox" name="hobbies" value="basketball">
    足球：<input type="checkbox" name="hobbies" value="football"><br>
    城市：
    <select name="city">
      <!-- 对下拉选项分组 -->
      <optgroup label="一线城市">
        <option value="lanzhou">兰州</option>
        <option value="tianshui">天水</option>
        <option value="baiyin" selected>白银</option>
      </optgroup>
      <!-- disabled 禁用 -->
      <optgroup label="二线城市" disabled>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
      </optgroup>
    </select><br>
    描述：<textarea name="des" cols="30" rows="10"></textarea><br>
    生日：<input type="datetime-local">
    日期：<input type="date"><br>
    文件上传：<input type="file"><br>
    滑块：<input type="range" max="100" min="0" step="10">
    颜色取色器：<input type="color">
    进度条：<progress min="0" max="100" value="70"></progress>
    <!-- 表单提交按钮 -->
    <input type="submit" value="提交">
</body>

</html>